<template>
    <div id="viewMap" :style="{ visibility: viewMapInfo.showMap }">
      <div class="map-container">
        <div id="qqmapcontainer" style="width: 1200px; height: 400px; background-color: antiquewhite;"></div>
        <i class="el-icon-close close-icon" @click="closeMap" />
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ViewMap',
    data() {
      return {
        viewMapInfo: {
          lat: '',
          lng: '',
          showMap: 'hidden',
          map: null
        }
      }
    },
    methods: {
      open(param) {
        const lngLat = this.wgs84togcj02(param.lng, param.lat)
        this.viewMapInfo.lat = lngLat.lat
        this.viewMapInfo.lng = lngLat.lon
        this.viewMapInfo.showMap = 'visible'
        this.launchIntoMapFullscreen()
        this.$nextTick(() => this.initMap())
      },
      initMap() {
        const center = new window.TMap.LatLng(this.viewMapInfo.lat, this.viewMapInfo.lng)
        const container = document.getElementById('qqmapcontainer')
        this.viewMapInfo.map = new window.TMap.Map(container, {
          center,
          zoom: 17.2,
          viewMode: '2D'
        })
        new window.TMap.MultiMarker({
          id: 'marker-layer',
          map: this.viewMapInfo.map,
          styles: {
            marker: new window.TMap.MarkerStyle({
              width: 25,
              height: 35,
              anchor: { x: 16, y: 32 },
              src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png'
            })
          },
          geometries: [{
            id: 'demo',
            styleId: 'marker',
            position: new window.TMap.LatLng(this.viewMapInfo.lat, this.viewMapInfo.lng),
            properties: { title: 'marker' }
          }]
        })
      },
      closeMap() {
        this.exitMapFullscreen()
        this.viewMapInfo.showMap = 'hidden'
        this.viewMapInfo.map.destroy()
      },
      launchIntoMapFullscreen() {
        const full = document.getElementById('viewMap')
        if (full.requestFullscreen) full.requestFullscreen()
        else if (full.mozRequestFullScreen) full.mozRequestFullScreen()
        else if (full.webkitRequestFullscreen) full.webkitRequestFullscreen()
        else if (full.msRequestFullscreen) full.msRequestFullscreen()
      },
      exitMapFullscreen() {
        if (document.exitFullscreen) document.exitFullscreen()
        else if (document.mozCancelFullScreen) document.mozCancelFullScreen()
        else if (document.webkitExitFullscreen) document.webkitExitFullscreen()
      },
      wgs84togcj02(lng, lat) {
        // Placeholder for coordinate conversion
        return { lon: lng, lat }
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  #viewMap {
    .map-container {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
    }
    .close-icon {
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 20px;
      color: red;
      cursor: pointer;
    }
  }
  </style>